<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f"%>
<%@ taglib uri="/WEB-INF/tld/mobai-el-common.tld" prefix="el"%>
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商家列表</title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css"
	href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/style.css" />
	<style>
		.nav{
			z-index: auto;
		}
		.nav > iframe {
			text-align: center;
			text-align: left;
			margin-left: 500px;
			margin-right: 100px;
		}
		
		.header  > nav {
			text-align: center;
		}
		
		.navbar-black{background-color:#222;border-bottom:#080808 1px solid;-moz-box-shadow: 0 0 4px #333333;-webkit-box-shadow: 0 0 4px #333333;box-shadow: 0 0 4px #333333}
		.navbar-black .logo{ color: #fff }
		.navbar-black .navbar-logo-m{color: #eee}
		.navbar-black .navbar-nav > ul > li,
		.navbar-black .navbar-nav > ul > li > a{ color:#fff}
		.navbar-black .navbar-nav > ul > li > a:hover,
	</style>
</head>
<body style="margin:5px">

	<!-- Button trigger modal -->
	<!------------------------------------ 添加   /修改  模态框 开始------------------------------------>
	<!-- Modal -->
	<div id="myModal" class="modal fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 900px">
			<div class="modal-content radius">
				<div class="modal-header">
					<h3 class="modal-title">店铺信息维护</h3>
					<a class="close" data-dismiss="modal" aria-hidden="true"
						href="javascript:void();">×</a>
				</div>
				<div class="modal-body">
					<form action="/three/ly/save" method="post" id="addform"
						enctype="multipart/form-data">
						<input type="hidden" name="shopId" id="shopId"
							class="input-text radius" />
						<table class="table">
							<tr>
								<td>店主账号</td>
								<td><select name="ownerId" id="ownerId" class="select"
									style="width: 150px; height: 25px">
								</select></td>
								<td>状态</td>
								<td><select name="showStatus" id="showStatus"
									class="select" style="width: 150px; height: 25px">
										<option value="1">启用</option>
										<option value="0">禁用</option>
								</select></td>
							</tr>
							<tr>
								<td>店铺名称</td>
								<td><input class="input-text" type="text" name="shopName"
									id="shopName" style="width: 150px; height: 25px"></td>
								<td>店铺简称</td>
								<td><input class="input-text" type="text" name="shortName"
									id="shortName" style="width: 150px; height: 25px"></td>
							</tr>
							<tr>
								<td>月目标现金收入</td>
								<td><input type="number" id="monthCashIn"
									style="width: 146px; height: 22px" name="monthCashIn" /></td>
								<td>月目标消耗收入</td>
								<td><input type="number" id="monthExpendIn"
									style="width: 146px; height: 22px" name="monthExpendIn" /></td>
							</tr>
							<tr>
								<td>店铺标志</td>
								<td><span class="btn-upload form-group" id="span"> <input
										class="input-text upload-url radius" type="text"
										style="width: 185px;" name="uploadfile-1" id="1file" readonly>
										<a href="javascript:void();" class="btn btn-primary radius"><i
											class="Hui-iconfont">&#xe642;</i> </a> <input type="file"
										multiple name="files" id="file1" class="input-file">
								</span> <span id="span1"> <img src="" alt="请上传图片" id="shopImage"
										width="100px" height="50px"> <input type="hidden"
										name="shopImage" /> <a href="#" style="margin-top: 10px"
										class="btn btn-primary radius" id="xztp"><i
											class="Hui-iconfont">&#xe642;</i> </a>
								</span></td>
								<td>店铺封面图</td>
								<td><span class="btn-upload form-group" id="span2">
										<input class="input-text upload-url radius" type="text"
										style="width: 185px;" name="uploadfile-1" id="1file" readonly>
										<a href="javascript:void();" class="btn btn-primary radius"><i
											class="Hui-iconfont">&#xe642;</i> </a> <input type="file"
										multiple name="files" id="file1" class="input-file">
								</span> <span id="span3"> <img src="" alt="请上传图片"
										id="shopDetailImage" width="100px" height="50px"> <input
										type="hidden" name="shopDetailImage" /> <a href="#"
										style="margin-top: 10px" class="btn btn-primary radius"
										id="xztp1"><i class="Hui-iconfont">&#xe642;</i> </a>
								</span></td>
							</tr>
							<tr>
								<td>营业执照号</td>
								<td><input type="number" class="input-text"
									id="shopLicense" name="shopLicense" style="width: 150px;" /></td>
								<td>营业时间</td>
								<td><input type="time" name="beginTime" id="beginTime"
									style="width: 70px;" /> <input type="time" name="endTime"
									id="endTime" /></td>
							</tr>
							<tr>
								<td>店铺面积</td>
								<td><input class="input-text" type="text" name="shopArea"
									id="shopArea" style="width: 150px; height: 25px" /></td>
								<td>主营项目</td>
								<td><input class="input-text" type="text"
									name="shopProject" id="shopProject" style="width: 150px;" /></td>
							</tr>
							<tr>
								<td>店铺类型</td>
								<td><select name="shopType" id="shopType" class="select"
									style="width: 150px; height: 25px">
										<option value="1">美容</option>
										<option value="2">美甲</option>
								</select></td>
								<td>排序号</td>
								<td><input type="number" class="form-control" id="sortNo"
									style="width: 146px; height: 22px" name="sortNo" min="1" />
							</tr>
							<tr>
								<td>店铺电话</td>
								<td><input class="input-text" type="text" name="shopPhone"
									id="shopPhone" style="width: 150px; height: 25px"></td>
								<td>店铺地址</td>
								<td><input class="input-text" type="text"
									name="shopAddress" id="shopAddress"
									style="width: 150px; height: 25px"></td>
							</tr>
							<tr>
								<td>地址X坐标</td>
								<td><input class="input-text" type="text" name="gpsX"
									id="gpsX" style="width: 150px; height: 25px"></td>
								<td>地址Y坐标</td>
								<td><input class="input-text" type="text" name="gpsY"
									id="gpsY" style="width: 150px; height: 25px"></td>
							</tr>
							<tr>
								<td>备注</td>
								<td colspan="3"><textarea name="shopRemark" id="shopRemark"
										rows="3" cols="30" name="" class="textarea "></textarea></td>
							</tr>
							<tr>
								<td>店铺介绍</td>
								<td colspan="3"><textarea name="shopIntro" id="shopIntro"
										rows="3" cols="30" name="" class="textarea "></textarea></td>
							</tr>
						</table>
					</form>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary" id="btn_save">确定</button>
					<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
				</div>
			</div>
		</div>
	</div>
	<!------------------------------------ 添加   /修改  模态框 结束------------------------------------>

	<!------------------------------------ 查看详情 模态框 开始------------------------------------>
	<div class="modal fade " tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" id="ckxq">
		<div class="modal-dialog " style="width: 1105px;">
			<form id="addBossform" name="addBossform" action="" method="post">
				<div class="modal-content radius">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title" id="myModalLabel" >查看详情</h4>
					</div>

					<header class="navbar-wrapper" >						
						<div class="navbar navbar-black"  >
							<div class="container cl">								
							<a class="logo navbar-logo-m f-l mr-10 visible-xs" href="">美颜社</a>							
							<a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;">&#xe667;</a>						
								<nav class="nav navbar-nav nav-collapse" role="navigation"
									id="Hui-navbar">
									<ul class="cl" class="nav navbar-nav navbar-center">
										<li class="current"><a rel="nofollow"
											href="javascript:void(0)" id="aaa">基本信息</a></li>
										<li><a rel="nofollow" href="javascript:void(0)" id="bbb">员工列表</a></li>
										<li><a rel="nofollow" href="javascript:void(0)" id="ccc">顾客列表</a></li>
										<li><a rel="nofollow" href="javascript:void(0)" id="ddd" >营业记录</a></li>
									</ul>
								</nav>
							</div>
						</div>
						
					</header>
					<iframe src="" id="iframe"
										style="height:450px;width:1100px; border: none; scrolling: yes" ></iframe>
					<div class="modal-footer">
						<button type="button" class="btn btn-default"
							data-dismiss="modals" id="close3">关闭</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<!--查看详情模态框结束-->



	<form action="/three/ly/list" method="post">
		<!------------------------------------ 综合查询开始------------------------------------>
		店铺编号：<input class="input-text" type="text" name="sid"
			style="width: 150px; height: 25px"> 店铺名称：<input
			class="input-text" type="text" name="sname"
			style="width: 150px; height: 25px"> 状态： <select name="status"
			class="select" style="width: 150px; height: 25px">
			<option value=""></option>
			<option value="1">启用</option>
			<option value="0">禁用</option>
		</select><br> 店主账号：<input class="input-text" type="text" name="shopUser.account"
			style="width: 150px; height: 25px"> 店铺简称：<input
			class="input-text" type="text" name="sjname"
			style="width: 150px; height: 25px"> 营业执照号： <input
			class="input-text" type="text" name="lid"
			style="width: 150px; height: 25px">
		<button type="submit" class="btn btn-primary">
			<i class="Hui-iconfont">&#xe665;</i>查询
		</button>
		<button class="btn btn-primary" type="submit" id="btn_reset">
			<i class="Hui-iconfont">&#xe68f;</i>重置
		</button>
		<!------------------------------------ 综合查询结束----------------------------------->



		<!------------------------------------ 添加    修改    删除------------------------------------>
		<div class="cl pd-5 bg-1 bk-gray mt-20">
			<span class="1"> <a href="javascript:;" onclick="admin_add()"
				class="btn btn-primary radius"> <i class="Hui-iconfont">&#xe600;</i>
					添加
			</a>
			</span> <span class="1"></span>
		</div>
		<!------------------------------------ 查询所有开始------------------------------------>
		<table
			class="table table-border table-bordered table-hover table-bg table-sort">
			<thead>
				<tr>
					<td>店铺编号</td>
					<td>店铺名称</td>
					<td>店铺简称</td>
					<td>店主账号</td>
					<td>店铺法人</td>
					<td>营业执照号</td>
					<td>店铺电话</td>
					<td>状态</td>
					<td>排序</td>
					<td>更新时间</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${list}" var="shop">
					<tr>
						<td>${shop.shopId}</td>
						<td>${shop.shopName}</td>
						<td>${shop.shortName}</td>
						<td>${shop.shopUser.account}</td>
						<td>${shop.shopUser.username}</td>
						<td>${shop.shopLicense}</td>
						<td>${shop.shopPhone}</td>
						<td>${shop.showStatus==0?'禁用':'启用'}</td>
						<td>${shop.sortNo}</td>
						<td><f:formatDate value="${shop.modifyTime}"
								pattern="yyyy-MM-dd HH:mm:ss" /></td>
						<td><a style="text-decoration: none" href="javascript:;"
							onclick='admin_update(${el:toJsonString(shop)})' title="编辑">
								<i class="Hui-iconfont">&#xe6df;</i>
						</a> <a style="text-decoration: none" class="ml-5"
							href="/three/ly/delete?shopId=${shop.shopId }" title="删除"> <i
								class="Hui-iconfont">&#xe6e2;</i>
						</a> <a style="text-decoration: none" href="javascript:;" class="ml-5"
							onclick="ckxq('${shop.shopId}')" title="查看详情"> <i
								class="Hui-iconfont">&#xe665;</i>
						</a></td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		<!------------------------------------ 查询所有结束------------------------------------>
	</form>
	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="/three/lib/jquery/1.9.1/jquery.js"></script>
	<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="/three/static/formEdit.js"></script>
	<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script>
	<script type="text/javascript"
		src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
	<script type="text/javascript"
		src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript"
		src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript"
		src="/three/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
	<script type="text/javascript"
		src="/three/lib/jquery.validation/1.14.0/validate-methods.js"></script>
	<script type="text/javascript"
		src="/three/lib/jquery.validation/1.14.0/messages_zh.js"></script>
</body>
<script type="text/javascript">
		/*分页*/
		$('.table-sort').dataTable({
			"aaSorting" : [ [ 1, "desc" ] ],//默认第几个排序
			"bStateSave" : true,//状态保存
			"pading" : false,
			/* "aoColumnDefs" : [ {
				"orderable" : false,
			//"aTargets" : [ 0, 8 ]
			} // 不参与排序的列
			] */
		});
		/*表单验证*/
		$("#addform").validate({
			rules : {
				ownerId : { //店主账号
					required : true
				},
				shopName : { //店铺名称
					required : true,
					minlength : 2,
					maxlength : 10
				},
				shortName : { //店铺简称
					minlength : 2,
					maxlength : 10
				},
				monthCashIn : { //月目标收入
					required : true,
					number : true

				},
				monthExpendIn : { //月目标消耗收入
					required : true,
					number : true
				},
				shopLicense : { //营业执照号
					required : true,
					digits : true
				},
				beginTime : { //营业开始时间
					required : true
				},
				endTime : { //营业结束时间
					required : true
				},

				shopArea : { //店铺面积
					required : true,
					digits : true
				},
				shopProject : { //主营项目
					required : true,
					minlength : 5,
					maxlength : 10
				},
				sortNo : { //排序号
					digits : true
				},
				shopPhone : { //店铺电话
					digits : true,
					minlength : 11
				},
				shopAddress : { //店铺地址
					minlength : 5,
					maxlength : 10
				},
				gpsX : { //店铺地址X坐标
					digits : true
				},
				gpsY : { //店铺地址Y坐标
					digits : true
				},

				onkeyup : false,
				focusCleanup : true
			}
		});
		
		/*点击重置按钮开始*/
		$("#btn_reset").click(function() {
			$(".input-text").val("");
			$(".textarea").val("");
			$("#number").val("1");
		});
		/*点击重置按钮结束*/
		
		
		/*管理员-增加*/
		function admin_add() {
			$('#myModal').modal('show');
			$("#span1").hide();					
			$("#span3").hide();
		} 
 	

		/*管理员-查看详情*/
		function admin_select() {
			$('#myModal').modal('show');
		}

		
		
		
		
		$.ajax({//异步请求获取店主账号
			type : "POST",
			url : "/three/ly/queryShopUserAccount",
			success : function(msg) {
				$.each(msg, function(inde, obj) {
					$("#ownerId").append(
							"<option value='"+obj.shopUserId+"'>" + obj.account
									+ "</option>")

				})
			}
		});
		/**
		添加店铺信息
		 */
		$("#btn_save").click(function() {//保存事件
			$("innput[type='text']").val("");
			$("innput[type='number']").val("");
			$("innput[type='time']").val("");
			$(".textarea").val("");
			var shopidValue = $("#shopId").val();
			if (shopidValue == "") {
				$("#addform").attr("action", "/three/ly/save")
				$("#addform").submit();
			} else {
				$("#addform").attr("action", "/three/ly/update")
				$("#addform").submit();
			}
		});
		
		/**
		修改店铺信息--给数据赋值
		*/
		function admin_update(shop){
			$.ajax({
				type : "POST",
				url : "/three/ly/toupdate",
				dataType : "json",
				async : false,//异步的;
				data : {
					shopId : shop.shopId
				},
				//成功后开启模态框
				success : function(data) {
					//显示模态框					
					$("#myModal").modal("show");
					//自动填值,括号里的值通过
					$("#addform").formEdit(shop);
				 	$("#span").hide();
					$("#span1").show(); 
					$("#span2").hide();
					$("#span3").show();
					//店铺标志图
					$("#shopImage").attr("src","http://localhost:8080/three"+shop.shopImage);
					$("#xztp").on("click",function(){
						$("#span1").hide();
						$("#span").show();
					});
					//店铺封面图						
					$("#shopDetailImage").attr("src","http://localhost:8080/three"+shop.shopDetailImage);
					$("#xztp1").on("click",function(){
						$("#span3").hide();
						$("#span2").show();
					});
					//备注
					$("#shopRemark").val(shop.shopRemark);
					//店铺介绍
					$("#shopIntro").val(shop.shopIntro);
					
					
				}
			});
		}
		
		/*
		打开查看详情（ckxq）模态框
		**/
		function ckxq(aaa){
			shopId=aaa;
			$('#ckxq').modal('show');
			$("#iframe").attr("str","/three/ly/queryShopByShopId?shopId="+aaa);
					
		}
		//基本信息
		$("#aaa").click(function(){
			$("#iframe").attr("src","/three/ly/queryShopByShopId?shopId="+shopId);
		});
		
		//店铺员工
		$("#bbb").click(function(){//店铺员工管理
			$("#iframe").attr("src","/three/ly/queryShopUserByShopId?shopId="+shopId);
		});
		
		//顾客列表
		$("#ccc").click(function(){
			$("#iframe").attr("src","/three/custom/list?active=shop&shopId="+shopId);
		});
		
		//营业记录
		$("#ddd").click(function(){
			$("#iframe").attr("src","/three/bus/list?active=shop&shopId="+shopId);
		});
		
		
		/* $("#close3").on("click", function() {
			$('#ckxq').modal('hide');
		}); */
	</script>
</body>
</html>


